<template>
  <div class="dw-login-wrapper">
    <div class="header-half"></div>
    <div class="bottom-half">
      <img class="img" :src="image2" />
      <div class="login-box">
        <div class="cn-name" v-text="webCnName"></div>
        <div class="en-name" v-text="webEnName"></div>
        <el-form>
          <div class="user-item">
            <el-input class="input" placeholder="账号/手机号/邮箱" v-model="usercode">
              <template #prefix>
                <el-icon :size="22"><User /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="pwd-item">
            <el-input class="input" placeholder="密码" type="password" :show-password="true" v-model="password">
              <template #prefix>
                <el-icon :size="22"><Lock /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="info-item">
            <el-checkbox v-model="rememberPassowrd" label="记住密码" />
            <el-link type="primary">忘记密码</el-link>
          </div>
          <el-button class="login-btn" type="primary" @click="onLogin" :loading-icon="Eleme" :loading="loading">登录</el-button>
        </el-form>
      </div>
    </div>
    <footer class="copyright" v-text="copyright"></footer>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import image2 from '@/assets/images/login/2.png';
import JSEncrypt from 'jsencrypt';
import config from '@/config/config.json';
import { useUserStore } from '@/stores/modules/user';
import { Lock, User, Eleme } from '@element-plus/icons-vue';
import { getCopyright, getWebCnName, getWebEnName } from '@/api/free';

const userStore = useUserStore();
/**
 * 登录页面
 */
defineOptions({
  name: 'LoginPage',
});
const loading = ref<boolean>(false);
const usercode = ref<string>('admin');
const password = ref<string>('123456');
const webCnName = ref<string>('');
const webEnName = ref<string>('');
const copyright = ref<string>('');
const rememberPassowrd = ref<boolean>(false);

const getEncrypt = (data: string) => {
  const encrypt = new JSEncrypt();
  //设置公钥
  encrypt.setPublicKey(config.publicKey);
  return encrypt.encrypt(data) || '';
};
const onLogin = () => {
  if (!loading.value) {
    loading.value = true;
    const userCodeEncrypt = getEncrypt(usercode.value);
    const passwordEncrypt = getEncrypt(password.value);
    userStore.login(userCodeEncrypt, passwordEncrypt).finally(() => (loading.value = false));
  }
};
onMounted(async () => {
  const webCnNameRes = await getWebCnName();
  webCnName.value = webCnNameRes.data as unknown as string;
  document.title = webCnName.value;
  const webEnNameRes = await getWebEnName();
  webEnName.value = webEnNameRes.data as unknown as string;
  const copyrightRes = await getCopyright();
  copyright.value = copyrightRes.data as unknown as string;
});
</script>
<style lang="scss" scoped>
.dw-login-wrapper {
  width: 100%;
  height: 100%;
  background-color: #1e6fff;

  .header-half {
    width: 100%;
    height: 50%;
  }
  .bottom-half {
    width: 100%;
    height: 50%;
    background-color: #fcfcfc;
  }
  .img {
    width: 492px;
    height: auto;
    position: absolute;
    top: 100px;
    right: 453px;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 99999;
  }
  .login-box {
    background-color: #ffffff;
    width: 980px;
    height: 520px;
    position: absolute;
    top: 10%;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    border-radius: 20px;
    font-size: 60px;
    backdrop-filter: blur(20px);
    color: #fff;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2);
  }
  .cn-name {
    width: 960px;
    height: 35px;
    color: #fff;
    font-size: 30px;
    position: absolute;
    top: -7rem;
    text-align: center;
  }
  .en-name {
    width: 960px;
    height: 35px;
    color: #fff;
    font-size: 12.38px;
    position: absolute;
    top: -4rem;
    text-align: center;
  }
  .user-item {
    position: absolute;
    top: 7.8rem;
    right: 4rem;
    display: flex;
  }
  .pwd-item {
    position: absolute;
    top: 12.8rem;
    right: 4rem;
    display: flex;
  }
  .info-item {
    position: absolute;
    top: 16.5rem;
    right: 4rem;
    display: flex;
    width: 373px;
    justify-content: space-between;
  }
  .login-btn {
    position: absolute;
    top: 19rem;
    right: 3.9rem;
    border: none;
    width: 373px;
    text-indent: 0rem;
    border-radius: 10px;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    height: 50px;
  }

  .input {
    height: 55px;
    width: 373px;
  }

  .copyright {
    text-align: center;
    color: #000;
    position: fixed;
    bottom: 30px;
    width: 100%;
  }
}
</style>
